<template>
  <div>
    <div class="flex">
      <div class="mr-10 text-left w-400">
        <span class="w-300 text-left inline-block">人数</span>
        <input type="text" v-model="form.persons" />
      </div>
      <div class="mr-10 text-left w-400">
        <span class="w-300 text-left inline-block">每台手机每天赚</span>
        <input type="text" v-model="form.money" />
      </div>
      <div class="mr-10 text-left w-400">
        <span class="w-300 text-left inline-block">每人手机数量</span>
        <input type="text" v-model="form.phones" />
      </div>
    </div>
    <div class="flex">
      <div class="mr-10 text-left w-400">
        <span class="w-300 text-left inline-block">每台手机花费</span>
        <input type="text" v-model="form.cost" />
      </div>
      <div class="mr-10 text-left w-400">
        <span class="w-300 text-left inline-block">每台手机网费</span>
        <input type="text" v-model="form.cost1" />
      </div>
    </div>
    <div class="flex">
      <div class="mr-10 text-left w-400">
        <span class="w-300 text-left inline-block">第一年收入：</span>
        <span>{{ firstYearEarn }}</span>
      </div>
      <div class="mr-10 text-left w-400">
        <span class="w-300 text-left inline-block">第一年成本：</span>
        <span>{{ firstYearCost }}</span>
      </div>
      <div class="mr-10 text-left w-400">
        <span class="w-300 text-left inline-block">第一年利润：</span>
        <span>{{ firstYearEarn - firstYearCost }}</span>
      </div>
    </div>
    <div class="flex">
      <div class="mr-10 text-left w-400">
        <span class="w-300 text-left inline-block">第二年收入：</span>
        <span>{{ secondYearEarn }}</span>
      </div>
      <div class="mr-10 text-left w-400">
        <span class="w-300 text-left inline-block">第二年成本：</span>
        <span>{{ secondYearCost }}</span>
      </div>
      <div class="mr-10 text-left w-400">
        <span class="w-300 text-left inline-block">第二年利润：</span>
        <span>{{ secondYearEarn - secondYearCost }}</span>
      </div>
    </div>
  </div>
</template>
<script>
import { ref } from "vue";
export default {
  setup() {
    let form = ref({
      money: 5,
      phones: 15,
      persons: 1,
      cost: 800,
      cost1: 300,
    });
    return {
      form,
    };
  },
  computed: {
    firstYearEarn() {
      return (
        (this.form.money || 0) *
        365 *
        (this.form.phones || 0) *
        (this.form.persons || 1)
      );
    },
    secondYearEarn() {
      return (
        (this.form.money || 0) *
        365 *
        (this.form.phones || 0) *
        (this.form.persons || 1)
      );
    },
    firstYearCost() {
      return (
        (this.form.phones || 0) *
        (this.form.persons || 1) *
        (this.form.cost + this.form.cost1 || 0)
      );
    },
    secondYearCost() {
      return (
        (this.form.phones || 0) *
        (this.form.persons || 1) *
        (this.form.cost1 || 0)
      );
    },
  },
};
</script>
<style lang="less">
.text-left {
  text-align: left;
}
.w-400 {
  width: 400px;
}
.w-300 {
  width: 150px;
}
.inline-block {
  display: inline-block;
}
</style>
